<template>
  <div class="bg-gray-900 text-white rounded-lg overflow-hidden shadow-lg my-4 w-full max-w-4xl">
    <!-- Terminal Header -->
    <div class="flex items-center justify-between px-4 py-3 bg-gray-800 border-b border-gray-700">
      <div class="flex items-center space-x-2">
        <div class="flex space-x-1.5">
          <div class="w-3 h-3 rounded-full bg-red-500"></div>
          <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
          <div class="w-3 h-3 rounded-full bg-green-500"></div>
        </div>
        <span class="ml-3 text-sm font-medium text-gray-300">SQL 查询语句</span>
      </div>
      <div class="flex items-center space-x-2">
        <button
          @click="copySQL"
          class="p-1.5 text-gray-400 hover:text-white transition-colors rounded"
          title="复制SQL"
        >
          <ClipboardIcon class="w-4 h-4" />
        </button>
       
      </div>
    </div>
    
    <!-- SQL Content -->
    <div class="p-4 font-mono text-sm overflow-x-auto">
      <pre class="whitespace-pre-wrap text-gray-100">{{ sqlContent }}</pre>
    </div>
    
    <!-- SQL Info -->
    <div v-if="sqlInfo" class="px-4 py-3 bg-gray-800 border-t border-gray-700 text-xs text-gray-400">
      <div class="flex items-center justify-between">
        <span>{{ sqlInfo }}</span>
        <span v-if="executionTime">执行时间: {{ executionTime }}ms</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ClipboardIcon } from '@heroicons/vue/24/outline'
import { useAppStore } from '@/store/app'

interface Props {
  sqlContent: string
  sqlInfo?: string
  executionTime?: number
}

const props = withDefaults(defineProps<Props>(), {
  sqlContent: '',
  sqlInfo: '',
  executionTime: 0
})

const emit = defineEmits<{
  execute: [sql: string]
}>()

const appStore = useAppStore()


// 复制SQL
const copySQL = async () => {
  try {
    await navigator.clipboard.writeText(props.sqlContent)
    appStore.showSuccess('SQL已复制到剪贴板')
  } catch (error) {
    appStore.showError('复制失败')
  }
}


</script>